<script setup>
import { ref,reactive,onBeforeMount,unref } from 'vue'
import useSeckillsStore from '../../store/seckillsStore'
import useCatesStore from '../../store/catesStore'
import useGoodsStore from '../../store/goodsStore'
import { ElMessageBox,ElMessage } from 'element-plus'

const seckillsStore = useSeckillsStore()
const catesStore = useCatesStore()
const goodsStore = useGoodsStore()

onBeforeMount(() => {
  // 获取分类
  catesStore.getCatesAction()
  // 获取所有商品
  goodsStore.getGoodsAllAction()
})

const editId = ref('')
const cateArr = reactive({
  list: []
})
const timeArr = reactive({
  list: []
})
const skForm = reactive({
  title: "",
  begintime: "",
  endtime: "",
  first_cateid: -1,
  second_cateid: -1,
  goodsid: -1,
  status: 1
})
const validGoods = (rule, value, callback) => {
  if (value === "") {
    return callback(new Error("请选择关联商品"));
  } else if (value === -1) {
    return callback(new Error("请选择关联商品"));
  } else {
    callback();
  }
}
const validCate = (rule, value, callback) => {
  if (value === "") {
    return callback(new Error("请选择商品类型"));
  } else if (value === -1) {
    return callback(new Error("请选择商品类型"));
  } else {
    callback()
  }
};
const rules = reactive({
  title: {
    required: true,
    message: "请输入活动名称",
    trigger: "blur",
  },
  begintime: {
    required: true,
    message: "请选择活动时间",
    trigger: "blur",
  },
  endtime: { required: true, message: "请选择活动时间", trigger: "blur" },
  first_cateid: {
    validator: validCate,
    trigger: "blur",
  },
  second_cateid: {
    validator: validCate,
    trigger: "blur",
  },
  goodsid: { validator: validGoods, trigger: "blur" },
  status: { required: true, message: "请选择活动状态", trigger: "blur" }
})
// 导出父组件需用到属性与方法
defineExpose({
  editId,skForm,cateArr,timeArr
})

// 获取组件el-form上的ref
const formRef = ref(null)

function handleChange(value) {
  skForm.first_cateid = value[0];
  skForm.second_cateid = value[1];
}
function changeTime(value) {
  // console.log(this.timeArr, "时间范围");
  skForm.begintime = value[0].getTime().toString();
  skForm.endtime = value[1].getTime().toString();
}

// 重置表单
const resetForm = () => {
  editId.value = ''
  cateArr.list = []
  timeArr.list = []
  skForm.title = ''
  skForm.begintime = ""
  skForm.endtime = ""
  skForm.first_cateid = -1
  skForm.second_cateid = -1
  skForm.goodsid = -1
  skForm.status = 1
  // 关闭对话框
  seckillsStore.closeDialog()
}
// 提交表单
const submitForm = () => {
  // console.log(skForm,'skForm------')
  let form = unref(formRef)
  form.validate((valid) => {
    if (valid) {
      // console.log('submit!')
      if(editId.value) {
        // 编辑
        // console.log(editId,'编辑-----')
        seckillsStore.editseckillsAction({...skForm,id: editId.value})
      } else {
        // console.log(skForm,'新增----')
        seckillsStore.addSeckillsAction(skForm)
      }
      // 重置表单
      resetForm()
    } else {
      // console.log('error submit!')
      return false
    }
  })
}

const handleClose = (done) => {
  ElMessageBox.confirm('你确定要关闭吗？')
    .then(() => {
      done()
      // 重置表单
      resetForm()
    })
    .catch(() => {
      // catch error
    })
}
</script>

<template>
  <!-- 对话框 -->
  <el-dialog
    :title="editId ? '编辑秒杀':'新增秒杀'"
    v-model="seckillsStore.dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <el-form :model="skForm" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="活动名称" prop="title">
        <el-input
          v-model="skForm.title"
          placeholder="请输入活动名称"
          auto-complete="off"
        />
      </el-form-item>
      <el-form-item label="商品类型" class="demo-attrs" prop="second_cateid">
        <el-cascader
          v-model="cateArr.list"
          :options="catesStore.cateList"
          :props="{ label: 'catename', value: 'id' }"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="关联商品" class="demo-attrs" prop="goodsid">
        <el-select v-model="skForm.goodsid" prop="goodsid">
          <el-option :value="-1" label="请选择关联商品"></el-option>
          <el-option
            v-for="goods in goodsStore.allGoodsList"
            :key="goods.id"
            :label="goods.goodsname"
            :value="goods.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="活动时间" prop="begintime">
        <el-date-picker
          v-model="timeArr.list"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeTime"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="活动状态" prop="status">
        <el-radio-group v-model="skForm.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="submitForm">{{ editId? '编辑秒杀':'新增秒杀' }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>

</style>
